TP 1 QUESTIONS / RÉPONSES

Question 1. Créer le document à partir du code source fourni ci-dessous. Quelle est l'extension à donner à ce document ?
L'extention sera .html

Question 2. Tester dans un navigateur. Pourquoi le texte écrit en HTML ne s'affiche-t-il pas tout de suite ?
Car il y a le pop-up de l'alerte en Java Script qui s'affiche en premier

Question 3. Comment appelle-t-on le type de boîte de dialogue utilisé dans cet exemple ?
la boite de dialogue est "alert"

Question 4. Que se passe-t-il si on place le code JavaScript après le texte écrit en HTML ?
Il se passe la même chose

Question 5. Reprendre l'exemple précédent mais en plaçant le script dans un fichier externe script1.js. Tester dans un navigateur.
Exercice 1.2

Question 6. Afficher une boîte de dialogue modale lorsqu'on clique sur un lien. Le texte à afficher sera : Vous venez de cliquer sur un lien ! ».
Exercice 1.3

Question 7. Créer le document à partir du code source fourni ci-dessous.
Exercice 1.4

Question 8. Quel est le nom de l'évènement géré ici par le code JavaScript? Tester dans un navigateur. Que se passet-il lors du chargement de la page dans un navigateur ?
L'évenement "onLoad" sert a que le pop-up apparait lorsque nous chargons la page. Lors du chargement de la page, le pop-up réapparait

Question 9. Modifier l'exemple précédent pour qu'une boîte de dialogue modale affiche « À bientôt ! » lorsqu'on quitte la page. Quel est alors le nom de l'évènement à gérer ? Tester dans un navigateur le changement produit.
Le nom de l'évenement qui permet de gérer un pop-up lorsque que l'on quitte la page s'appelle "onUnLoad"
Exercice 4

Question 10. Éditer le document HTML et le script dans un fichier externe script2.js. Tester dans un navigateur.
Exercice 1.5

Question 11. Écrire le document HTML et le code JavaScript permettant de réaliser le changement d'image interactif
Exercice 2.1

Question 12. Écrire le document HTML et le code JavaScript permettant de réaliser l'affichage dynamique de texte.
Exercice 2.2

Question 13. Écrire un script exo-2-3.js qui permet de créer, au chargement de la page exo-2-3.html, une nouvelle fenêtre (window.open()) qui se fermera automatiquement (window.close ()) au bout de 3 secondes
Exercice 2.3

Question 14. Réaliser le formulaire suivant et assurer son contrôle en javascript : on n’acceptera pas les champs non remplis ou les choix ou options non renseignés (cf. exemples).
Exercice 2.4

Question 15. Bonus : Vous pouvez ajouter les contrôles ci-dessous pour améliorer l’interactivité avec le client.
→ Si aucune civilité n’a été choisie, fixer "Monsieur" par défaut
→ Si la case à cocher "je souhaite recevoir la newsletter" est activée alors donner le focus à la saisie de email
→ Si il y a saisie d’adresse email alors activer automatiquement la case à cocher "je souhaite recevoir la newsletter"
Exercice BONUS

TP 2 QUESTIONS / RÉPONSES

1) LECTURE DE L'ÉTAT DE CASES À COCHER ET DE BOUTONS RADIOS

2) GESTION DES BOITES DE LISTE : AFFICHAGE DE LA SÉLECTION

a) Ecrivez une fonction Chaine_Info_Selection_id( Idliste) qui reçoit l’identifiant de la liste et retourne une chaine contenant les informations : index, text, value. Exemple de format de la chaine : [ Index = 2, Texte = le texte, Valeur = 5].

b) Ecrivez ensuite une fonction activée sur l’événement onclick de la liste. Elle assure l’appel de la fonction Chaine_Info_Selection_id() et affiche le résultat dans la balise "p"

c) Ecrivez une nouvelle fonction Chaine_Info_Selection_Objet( Objet ) qui reçoit maintenant l’objet liste et retourne la même chaine que dans la question a).

d) Ajoutez à la page HTML une nouvelle liste et une nouvelle balise "p". Ecrivez une fonction activée sur l’événement onclick de la nouvelle liste en lui passant en paramètre la référence de la liste avec l’instruction this et l’identifiant de la zone d’affichage.

3) GESTION DES BOITES DE LISTE : AJOUTER UN ÉLÉMENT

a) Construisez une page HTML contenant une boite de liste (hauteur = 5), deux champs texte et un bouton.

b) Ecrivez une fonction JavaScript Ajoute_Option_Liste (Id, IdTexte,IdValeur) qui sera exécutée lors d’un clic sur le bouton et qui ajoute dans la liste une option avec les paramètres texte et valeur contenus dans les deux champs de saisie.

c) Ajoutez également une balise ou

pour l’affichage des informations lors d’une sélection d’une option dans la liste. Utilisez les fonctions de la question précédente.

d) Ajouter à la page HTML précédente deux boutons permettant l’appel de deux fonctions JavaScript assurant l’effacement du contenu d’une liste et l’effacement d’une option sélectionnée.

4) SÉLECTION D'UNE DATE AVEC DES BOITES DE LISTE

a) Ecrivez une fonction Initialise_Liste_Numerique( Idliste, Min, Max) qui reçoit l’identifiant d’une liste et les valeurs min et max définissant les valeurs à insérer dans la liste.

b) Construisez une page HTML avec trois listes permettant la sélection d’une date. Les listes seront initialisées sur l’événement onload de la page à l’aide de la fonction Initialise_Liste_Numerique( IdListe, Min, Max).

c) Ecrivez ensuite une fonction Valeur_Selection( IdListe ) qui reçoit en paramètre une liste et qui retourne le contenu de l’attribut valeur de la sélection.

d) Affectez à chaque liste sur l’événement onchange une fonction Affiche_Date() qui assure la mise à jour de l’affichage de la date au format JJ/MM/AAAA dans une balise "span" ou "p". Cette fonction assure la lecture de la valeur de sélection sur les trois listes et construit avec ces valeurs la date. La chaine obtenue est alors affectée au bloc "span" ou "p".

5) CHARGEMENT D'UNE BOITE DE LISTE AVEC UN TABLEAU

a) Ecrivez une fonction Initialise_Liste_Tableau ( IdListe, Tableau ) qui charge la boite de liste avec les valeurs contenues dans un tableau respectant le format du tableau T2 donné en exemple ci-dessus. Ce tableau donne les valeurs des attributs text et value de chaque option de la boite de liste. Dans l’exemple ci-dessus nous avons 4 choix.

b) Ecrivez le code HTML correspondant à la mise en page présentée ci-dessous, composée d’une boite de liste et d’un bloc "span" ou "p" pour l’affichage des informations d’une sélection d’une option dans la liste.

c) Ajoutez l’appel de la fonction d’initialisation de la liste sur l’événement onload().

d) Ajoutez la fonction d’affichage de la sélection en réutilisant la fonction Retourne_Info_Selection_Liste(IdListe) de l’exercice 2.

6) MODIFIER LE CONTENU D'UNE IMAGE AVEC UNE BOITE DE LISTE

a) A partir du code html de l’exercice précédent, construisez la page html ci-dessous. Conseil : utilisez un tableau (balise "TABLE") pour gérer facilement la mise en page.

b) Modifiez la fonction d’affichage des informations de sélection afin de mettre à jour l’image affichée à chaque nouvelle sélection. Pour modifier l’image, il suffit de modifier l’attribut src de l’objet image.